<template>
	<view class="">
		<!-- 头部导航栏 -->
		<cus-navbar ref="navbar"></cus-navbar>
		<view class="main-padding">
			<view class="gap-30"></view>
			<view class="flex justify-between align-center">
				<view :class="current==index?'mine-act-tag':'mine-tag'" v-for="(item,index) in tabs" :key="index"
					@click="onTabClick(index)">
					<view class="mine-tag-content flex-center">
						<text class="size-32">{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="mt-24 mine-data flex flex-direction justify-between" v-show="current==0">
				<view class="flex pl-30">
					<view class="flex-1">
						<navigator url="/pages/wallet/wallet">
							<!-- 我的资产 -->
							<view class="color-3e size-24">{{$t('index32')}}</view>
							<view class="size-42 text-bold color-black">{{mineData.balance1||0}}</view>
						</navigator>
					</view>
					<view class="flex-1">
						<!-- 收益 -->
						<view class="color-3e size-24">{{$t('index33')}}</view>
						<view class="size-32 text-bold color-black mt-10">{{mineData.balance1_income||0}}</view>
					</view>
					<view class="flex-1">
						<!-- 冻结 -->
						<navigator url="/pages/wallet/wallet?type=1">
						<view class="color-3e size-24">{{$t('index34')}}</view>
						<view class="size-32 text-bold color-black mt-10">{{mineData.balance1_freeze||0}}</view>
						</navigator>
					</view>
				</view>
				<view class="mine-data-bot flex align-center">
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/recharge">
							<view class="flex align-center">
								<image src="../../static/imgs/6.png" class="img-28"></image>
								<!-- 充值 -->
								<view class="ml-10 size-24">{{$t('index35')}}</view>
							</view>
						</navigator>
					</view>
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/withdraw">
							<view class="flex align-center">
								<image src="../../static/imgs/8.png" class="img-28"></image>
								<!-- 提现 -->
								<view class="ml-10 size-24">{{$t('index36')}}</view>
							</view>
						</navigator>
					</view>
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/exchange">
							<view class="flex align-center">
								<image src="../../static/imgs/7.png" class="img-28"></image>
								<!-- 兑换 -->
								<view class="ml-10 size-24">{{$t('index38')}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="mt-24 mine-data1 flex flex-direction justify-between" v-show="current==1">
				<view class="text-center">
					<navigator url="/pages/wallet/wallet">
						<!-- 我的资产 -->
						<view class="color-3e size-24">{{$t('index32')}}</view>
						<view class="size-42 text-bold color-black">{{mineData.balance2||0}} <text style="font-weight: normal;font-size: 28rpx;margin-left: 10rpx;">≈ {{mineData.balance2_usdt}}</text><text style="font-weight: normal;font-size: 24rpx;"> USDT</text></view>
					</navigator>
				</view>
				<view class="mine-data-bot flex align-center">
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/recharge">
							<view class="flex align-center">
								<image src="../../static/imgs/6.png" class="img-28"></image>
								<!-- 充值 -->
								<view class="ml-10 size-24">{{$t('index35')}}</view>
							</view>
						</navigator>
					</view>

					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/convert">
							<view class="flex align-center">
								<image src="../../static/imgs/9.png" class="img-28"></image>
								<!-- 互转 -->
								<view class="ml-10 size-24">{{$t('index37')}}</view>
							</view>
						</navigator>
					</view>
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/exchange">
							<view class="flex align-center">
								<image src="../../static/imgs/7.png" class="img-28"></image>
								<!-- 兑换 -->
								<view class="ml-10 size-24">{{$t('index38')}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="mt-24 mine-data1 flex flex-direction justify-between" v-show="current==2">
				<view class="text-center">
					<navigator url="/pages/wallet/wallet">
						<!-- 我的资产 -->
						<view class="color-3e size-24">{{$t('index32')}}</view>
						<view class="size-42 text-bold color-black">{{mineData.balance3||0}}</view>
					</navigator>
				</view>
				<view class="mine-data-bot flex align-center">
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/recharge">
							<view class="flex align-center">
								<image src="../../static/imgs/6.png" class="img-28"></image>
								<!-- 充值 -->
								<view class="ml-10 size-24">{{$t('index35')}}</view>
							</view>
						</navigator>
					</view>

					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/withdraw">
							<view class="flex align-center">
								<image src="../../static/imgs/8.png" class="img-28"></image>
								<!-- 提现 -->
								<view class="ml-10 size-24">{{$t('index36')}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>

			<!-- <view class="flex-center mt-40">
			<view class="cus-tag">
				<view class="cus-tag-content flex-center">
					<text class="size-30">其他功能</text>
				</view>
			</view>
		</view> -->

			<view class="home-list-card">
				<navigator url="/pages/mine/earnings">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/10.png" class="img-66"></image>
							<!-- 我的团队 -->
							<view class="ml-16 size-28">{{$t('index129')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/mine/jiedian">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/10.png" class="img-66"></image>
							<!-- 我的团队 -->
							<view class="ml-16 size-28">{{$t('index132')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/mine/team">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/10.png" class="img-66"></image>
							<!-- 我的团队 -->
							<view class="ml-16 size-28">{{$t('index39')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>

				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/mine/upload">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/11.png" class="img-66"></image>
							<!-- 分享上传 -->
							<view class="ml-16 size-28">{{$t('index40')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/mine/help">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/19.png" class="img-66"></image>
							<!-- 分享上传 -->
							<view class="ml-16 size-28">{{$t('index130')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/wallet/helpLog">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/19.png" class="img-66"></image>
							<!-- 帮扶记录 -->
							<view class="ml-16 size-28">{{$t('index41')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/mine/share">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/12.png" class="img-66"></image>
							<!-- 邀请好友 -->
							<view class="ml-16 size-28">{{$t('index42')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
				<view class="main-line mt-28 mb-28"></view>
				<navigator url="/pages/notice/about">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image src="../../static/imgs/21.png" class="img-66"></image>
							<!-- 平台介绍 -->
							<view class="ml-16 size-28">{{$t('index121')}}</view>
						</view>
						<image src="../../static/imgs/1.png" class="img-24"></image>
					</view>
				</navigator>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0
			}
		},
		computed: {
			...mapState({
				mineData: state => state.user.mineData
			}),
			tabs() {
				return [{
						name: 'USDT',
						value: 0
					},
					{
						name: 'AFH',
						value: 1
					},
					// {
					// 	name: 'AGH',
					// 	value: 2
					// }
				]
			}
		},
		onShow() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		methods: {
			loadData(refresh) {
				this.$api.post('/data/api.auth.center/get').then(res=>{
					this.$store.commit('user/setMineData', res.user)
					if(refresh)uni.stopPullDownRefresh()
				})
			},
			onTabClick(index) {
				if (this.current == index) return
				this.current = index
			},
			submit() {
				this.$refs.sold.open()
			}
		}
	}
</script>

<style lang="scss">
	.mine-act-tag {
		display: inline-block;
		min-width: 216rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background: linear-gradient(to right, #000000 50%, #6DECAB 50%);
		padding: 2rpx;

		.mine-tag-content {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
			background-color: #14151E;
			color: #01FF9A;
		}
	}

	.mine-tag {
		display: inline-block;
		min-width: 216rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #000000;
		padding: 2rpx;

		.mine-tag-content {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
			background-color: #14151E;
			color: #84AAA6;
		}
	}

	.mine-data {
		height: 216rpx;
		background-image: url("../../static/imgs/3.png");
		background-size: 100% 100%;
		padding-top: 45rpx;
	}

	.mine-data1 {
		height: 216rpx;
		background-image: url("../../static/imgs/4.png");
		background-size: 100% 100%;
		padding-top: 45rpx;
	}

	.mine-data-bot {
		width: 100%;
		height: 72rpx;
		background-color: rgba(0, 72, 58, 0.4);
		border-radius: 0 0 10rpx 40rpx;
	}

	.mine-data-line {
		width: 1rpx;
		height: 24rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}

	.cus-tag {
		display: inline-block;
		min-width: 430rpx;
		height: 88rpx;
		border-radius: 44rpx;
		position: relative;
		background: linear-gradient(to right, #000000 50%, #6DECAB 50%);
		padding: 2rpx;

		.cus-tag-content {
			width: 100%;
			height: 100%;
			border-radius: 42rpx;
			background-color: #14151E;
		}
	}
</style>